<template>
  <!-- 一线城市经验与薪资关系 -->
  <div class="barChart"></div>
</template>

<script>
import { getExperience } from "@/api/page2Api";
export default {
  name: "",
  data() {
    return {
      data: [],
      cityData: [],
      experData: {},
      job1: [],
      job2: [],
      job3: [],
      job4: []
    };
  },
  methods: {
    getData() {
      getExperience().then((res1) => {
        let res = res1.data
        if (res.length > 0) {
          this.cityData = res.map((item) => {
            if (item.length > 0) {
              return item[0].location;
            }
          });
          this.yearsData = res[0].map((item) => {
            return item.jingyan;
          });
          this.job1 = [];
          this.job2 = [];
          this.job3 = [];
          this.job4 = [];
          res.forEach((item, index) => {
            if (item.length > 0) {
              item.forEach((it, i) => {
                if (index == 0) {
                  this.job1.push(it.salary);
                }
                if (index == 1) {
                  this.job2.push(it.salary);
                }
                if (index == 2) {
                  this.job3.push(it.salary);
                }
                if (index == 3) {
                  this.job4.push(it.salary);
                }
              });
            }
          });
          this.setChart();
        }
      });
    },
    setChart() {
      let option = {
        title: {
          text: "一线城市学历平均薪资",
          x: "center",
          top: "5%",
          left: "3%",
          textStyle: {
            fontSize: 12,
            color: '#75deef',
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          top: "5%",
          right: "3%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          nameTextStyle: {
            color: "#fff",
          },
        },
        yAxis: {
          type: "category",
          data: this.yearsData,
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          nameTextStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: this.cityData[0],
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: this.job1,
          },
          {
            name: this.cityData[1],
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: this.job2,
          },
          {
            name: this.cityData[2],
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: this.job3,
          },
          {
            name: this.cityData[3],
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: this.job4,
          },
        ],
      };
      let myChart = this.$echarts(this.$el);

      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.barChart {
  width: 100%;
  height: 100%;
}
</style>